<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view style="position:relative;" class="banner1   ">
			<u-swiper height="300" :list="banner_list" :title="false" indicator-pos="bottomCenter" mode="number"
				:interval="3000"></u-swiper>
		</view>
		<view class="notice2   " @click="to_meet_new">
			<u-notice-bar :autoplay="true" :speed="160" mode="horizontal" :show="true" type="warning" :list="meet_list"
				:duration="2000" :isCircular="true"></u-notice-bar>
		</view>
		<view class="   gongge3 1   response " style="background-color: #fff;border-radius: 20px;">
			<view class=" cu-list grid col-4 no-border">
				<view class=" cu-item padding-xs " v-for="(item, index) in label3List" :class="['bg-' + item.zibgcolor]"
					:key="index">
					<view @click="to_app_info(item)">
						<image v-if="item.imgtype !=2" :src="item.pic" class="round" mode="heightFix"
							style="width: auto;height:70rpx;line-height:0rpx"></image>
						<view v-if="item.imgtype ==2" :class="['' + item.iconname,'text-' + item.iconcolor]"
							style="font-size: 70rpx;margin-top: 0rpx;"></view>
						<view v-if="item.openjiao && item.jiaoname"
							:style="{'backgroundColor':item.jiaobgcolor?item.jiaobgcolor: 'red','padding':item.neidistance? item.neidistance*2+'rpx':'' }"
							class=" cu-tag badge">{{item.jiaoname}}</view>
					</view>
					<text style="font-size: unset;color: unset;margin-top:4rpx;">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="flex4   response  flex  justify-start  "
			style="background-color: #fff;border-radius: 20px;padding: 10px;margin-bottom: 10px;">
			<view class="flex5   response  flex  justify-start  " style="flex-direction: column;">
				<view class="flex6   response  flex  justify-between  " style="flex-direction: row;">
					<text class="text7 ">工作动态</text>
					<!-- <text class="text8 text-sm "> 换一换</text> -->
				</view>
				<view class="flex9   response  flex  justify-start  " style="flex-direction: column;">
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
						class="  flex  justify-start  ">
						<view class="flex10    flex" v-for="(item,index) in activity_vlog"
							@click="to_activity_info(item)" style="flex-direction: column;align-items: center;">
							<image :src="item.cover.path"></image>
							<text style="flex-wrap: wrap;"> {{item.title}}...</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex19   response  flex  justify-start  "
			style="background-color: #fff;border-radius: 20px;flex-direction: column; padding: 10px; ">
			<view class="flex20   response  flex  justify-between  " style="flex-direction: row;">
				<text class="text21 "> 先锋事迹</text>
				<!-- <text class="text22 text-sm "> 换一换</text> -->
			</view>
			<view class="flex23   response  flex  justify-start  " style="flex-direction: column;">
				<view class="flex24   response  flex  justify-around  " v-for="(item,index) in activity_list"
					@click="to_activity_record_info(item)" style="flex-direction: row;align-items: center;">
					<view class="flex25    flex  justify-between  " style="flex-direction: column;">
						<text class="text26 text-df "> {{item.title}}</text>
						<view class="flex27   response  flex  justify-start  " style="flex-direction: column;">
							<text class="text28 text-sm "> {{item.content}}</text>
							<view class="time">
								<text>发布时间:{{timestampToDateString(item.create_date)}}</text>
							</view>
						</view>
					</view>
					<image v-if="item&&item.cover" class="picture32  "
						style="width:200rpx;height:200rpx;min-height:unset;" :src="item.cover.path"></image>
				</view>
			</view>
		</view>

		<!--vuebottom-->
	</view>
</template>

<script>
	import Vue from 'vue'

	const db = uniCloud.database()
	let opendb_banner_db = db.collection('opendb-banner');
	let abu_meet_db = db.collection('abu-meet-info');
	let abu_activity_db = db.collection('abu-activity-info');
	let abu_activity_vlog_db = db.collection('abu-activity-vlog');
	let activity_record_db = db.collection('activity-record');

	export default {
		data() {
			return {
				meet_data: '',
				banner_list: [],
				meet_list: [],
				activity_list: [],
				activity_vlog: [],
				swiperCurrent1: 0,
				/**vuejs**/
				label3List: [{
					"name": "教育学习",
					"imgtype": 2,
					"path": "/pages/study/study",
					"iconcolor": "red",
					"iconname": "cuIcon-write",
					"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/0fc1b1545ee701a807c4d7794cc0ec45.png"
				}, {
					"name": "党建活动",
					"imgtype": 2,
					"path": "/pages/index/activity",
					"iconcolor": "red",
					"iconname": "cuIcon-group",
					"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/0fc1b1545ee701a807c4d7794cc0ec45.png"
				}, {
					"name": "答题中心",
					"imgtype": 2,
					"path": "/pages/dati/dati_list",
					"iconcolor": "red",
					"iconname": "cuIcon-edit",
					"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/0fc1b1545ee701a807c4d7794cc0ec45.png"
				}, {
					"name": "会议中心",
					"imgtype": 2,
					"path": "/pages/meeting/meeting",
					"iconcolor": "red",
					"iconname": "cuIcon-home",
					"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/0fc1b1545ee701a807c4d7794cc0ec45.png"
				}]
			};
		},
		onShow() {
			this.load_d()
		},
		methods: {

			load_d() {
				// 加载轮播图照片
				opendb_banner_db.get().then(res => {
					this.banner_list = res.result.data.map(res => {
						return {
							...res,
							image: res.bannerfile.path
						}
					})
				})
				// 加载会议通知
				abu_meet_db.orderBy("start_date desc").get().then(res => {
					const meet_data = res.result.data
					this.meet_data = meet_data
					this.meet_list = meet_data.map(item => {
						return item.title
					})
				})
				// 加载活动事迹
				abu_activity_vlog_db.get().then(res => {
					const activity_data = res.result.data;
					this.activity_vlog = activity_data

				})
				// 加载活动
				activity_record_db.get().then(res => {
					const activity_data = res.result.data;
					console.log(activity_data);
					this.activity_list = activity_data

				})
			},
			to_activity_record_info(item) {
				uni.navigateTo({
					url: "./activity_record_info?id=" + item._id
				})
			},
			to_activity_info(item) {
				uni.navigateTo({
					url: "./activity_vlog_info?id=" + item._id
				})
			},
			to_meet_info() {
				uni.navigateTo({
					url: "/pages/meeting/meeting"
				})
			},
			to_meet_new() {
				uni.navigateTo({
					url: "/pages/meeting/meeting_info?id=" + this.meet_data[0]._id
				})
			},
			to_app_info(e) {
				// console.log(e);
				uni.navigateTo({
					url: e.path
				})
			},

			swiperChange1(e) {
				this.swiperCurrent1 = e.detail.current;
			},
			timestampToDateString(timestamp) {
				var date = new Date(timestamp);
				// 使用 Date 对象的方法获取年、月、日、时、分等信息
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
				var day = date.getDate();
				var hours = date.getHours();
				var minutes = date.getMinutes();

				// 将年、月、日、时、分格式化为想要的字符串格式
				var dateString = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day + ' ' +
					(hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;

				return dateString;
			}
		}
	}
</script>

<style lang="less">
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		background-color: #f0f0f0;
		height: 100vh;
	}

	/**pagedomcss**/
	.banner1 {
		width: 100%;
	}

	.notice2 {
		width: 100%;
		background-color: #ccc;
		margin-top: 20rpx;
	}

	.gongge3 {
		width: 100%;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.flex4 {
		width: 100%;
	}

	.flex5 {
		width: 100%;
	}

	.flex6 {
		width: 100%;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.text7 {
		font-weight: 900;
	}

	.text8 {
		font-weight: 100;
	}

	.flex9 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.flex10 {
		// width: 38%;
		// width: calc(38% - 20rpx);
		// margin-left: 10rpx;
		// margin-right: 10rpx;
	}

	.picture11 {
		width: 240rpx;
		overflow: hidden;
		height: 240rpx;
	}

	.flex13 {
		width: 38%;
		width: calc(38% - 20rpx);
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.picture14 {
		width: 240rpx;
		overflow: hidden;
		height: 240rpx;
	}

	.flex16 {
		width: 38%;
		width: calc(38% - 20rpx);
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.picture17 {
		width: 240rpx;
		overflow: hidden;
		height: 240rpx;
	}

	.flex19 {
		width: 100%;
	}

	.flex20 {
		width: 100%;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.text21 {
		font-weight: 900;
	}

	.text22 {
		font-weight: 100;
	}

	.flex23 {
		width: 100%;
	}

	.flex24 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.flex25 {
		width: 64%;
	}

	.text26 {
		font-weight: 600;
	}

	.flex27 {
		width: 100%;
		width: calc(100% - 20rpx);
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.text28 {
		font-weight: 100;
	}

	.text29 {
		font-weight: 100;
	}

	.text30 {
		font-weight: 100;
	}

	.text31 {
		font-weight: 100;
	}

	.picture32 {
		width: 200rpx;
		overflow: hidden;
		height: 200rpx;
	}
</style>